<template>
    <div class="header">
        <div class="city">
            廊坊
            <img src="../../img/down.png" alt="">
        </div>
        <div class="search">
            <img src="../../img/search.png" alt="">
            <input type="text" placeholder="请输入商家名、品类或者商圈">
        </div>
        <img src="../../img/yonghu.png" alt="" id="head">
    </div>
</template>

<script>
export default{
    name:'Header',
    data(){}
}
</script>

<style lang="scss" scoped>
.header{
    width: 690px;
    height: 100px;
    padding: 0 30px;
    background-color: #FFBF00;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .city{
        color: black;
        font-size: 26px;
        img{
            width: 14px;
            height: 8px;
        }
    }
    .search{
        width: 448px;
        height: 62px;
        padding: 0 26px;
        background-color: white;
        font-size: 26px;
        color: #999;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content:flex-start;
        img{
            width: 26px;
            height: 29px;
            margin: 10px;
        }
        input{
            border:0;
            outline: none;
            width: 80%;
        }
    }
    #head{
        width: 48px;
        height: 48px;
    }
}
</style>